<template>
	<view class="background">
		<view class="gridcontainer">
			<u-grid :column="3" :border="false" class="grid-row">
				<u-grid-item text="工作台" @click="goToWorkbench">
				  <image src="/static/bench.png" color="#00B42A" class="img"/>
				</u-grid-item>
				<u-grid-item text="检查记录" @click="goToCheckRecord">
				  <image src="/static/checkrecord.png" color="#00B42A" class="img" />
				</u-grid-item>
				<u-grid-item text="打印详情" @click="goToPrintDetail">
				  <image src="/static/printdetail.png" color="#00B42A" class="img" />
				</u-grid-item>
			</u-grid>
			<u-grid :column="2" :border="false" class="grid-row">
				<u-grid-item text="开具证明" @click="goToIssueCertificate">
				  <image src="/static/certificate.png" color="#00B42A" class="img" />
				</u-grid-item>
				<u-grid-item text="会员信息" @click="goToMemberInfo">
				  <image src="/static/membermsg.png" color="#00B42A" class="img" />
				</u-grid-item>
			</u-grid>
		</view>
		
		<view class="tabbar" v-if="{roleFlag}">
			<u-tabbar
				v-model="currentIndex"
				:value="currentIndex"
				:fixed="true"
				:placeholder="false"
				:safeAreaInsetBottom="true"
				activeColor="#3cc51f">
				<u-tabbar-item v-for="(item,index) in tablist" :key="index"
				@click="switchTab(item)"
				:text="item.text" :icon="item.name" :name="item.name" ></u-tabbar-item>
			</u-tabbar>
		</view>
		
		<view class="tabbar" v-else-if="{roleFlag}">
			<u-tabbar
				:value="currentIndex"
				v-model="currentIndex"
				:fixed="true"
				:placeholder="false"
				:safeAreaInsetBottom="true"
				activeColor="#c50003">
			  <u-tabbar-item v-for="(item,index) in tablist" :key="index"
			  @click="switchTab(item)"
			  :text="item.text" :icon="item.name" :name="item.name" ></u-tabbar-item>
			</u-tabbar>
		</view>
	</view>
</template>

<script>
	import { useUserStore } from '../../../../store/user'
	let useStore = useUserStore()
	export default {
		data() {
			return {
				role:"",
				roleFlag:undefined,
				currentIndex:"home",
				tablist: [
					{
						"pagePath": "pages/njt/supervisor/supervisorHome/supervisorHome",
						"name": "home",
						"text": "首页"
					},
					{
						"pagePath": "pages/njt/supervisor/supervisorInfo/supervisorInfo",
						"name": "account",
						"text": "个人"
					}
				]
			}
		},
		onLoad() {
			 uni.hideTabBar()
			 this.roleJudge()
		},
		methods: {
			roleJudge(){
				let roles = useStore.$state.role
				if(roles === "supervisor"){
					this.roleFlag = 1
				}
				else{
					this.roleFlag = 0
				}
			},
			switchTab(item){
				uni.switchTab({
					url:"/"+item.pagePath,  //tabbar页面跳转
				})
			},
			goToWorkbench(){
				uni.navigateTo({
					url:"/pages/njt/supervisor/bench/bench"    //跳转到工作台
				})
			},
			goToCheckRecord(){          //跳转到检查记录页面
				uni.navigateTo({
					url:"/pages/njt/supervisor/checkRecord/checkRecord"
				})
			},
			goToPrintDetail(){			//跳转到打印详情页面
				uni.navigateTo({
					url:"/pages/njt/supervisor/printDetail/printDetail"
				})
			},
			goToIssueCertificate(){		//跳转到开具证明
				uni.navigateTo({
					url:"/pages/njt/supervisor/issueCertificate/issueCertificate"
				})
			},
			goToMemberInfo(){			//跳转到会员页面
				uni.navigateTo({
					url:"/pages/njt/supervisor/memberInfo/memberInfo"
				})
			}
			
		}
	}
</script>

<style>

.background {
  width: 100vw;
  height: 100vh;
  background-color:#ebebeb;
  display: flex; 
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-between;
}

.gridcontainer{
	margin: 20px auto;
	width: 98%;
	height:60%; 
	flex: 1; /* 占满剩余高度，使布局更灵活 */
	display: flex;
	flex-direction: column;
	gap: 30rpx; /* 两行网格之间的间距 */
}

.grid-row {
  height: 200rpx; /* 固定每行高度，确保模块大小统一 */
}
.img{
	width: 100px;
	height: 100px;
}

.tabbar{
	width: 100%;
	height: 40%;
}
</style>
